﻿@using Smartstore.Net

@model dynamic

@{
    Layout = null;
}

@{
    string previewUrl = (string)ViewBag.PreviewUrl;
    if (!previewUrl.HasValue())
    {
        previewUrl = Url.RouteUrl("Homepage");
    }

    var themes = (IList<SelectListItem>)ViewBag.Themes;
    var stores = (IList<SelectListItem>)ViewBag.Stores;
    var disableApply = (bool)ViewBag.DisableApply;
    var toolOpen = (bool)ViewBag.ToolOpen;
}

<style type="text/css">
    .previewmode-wrapper {
        position: fixed;
        right: -250px;
        top: 150px;
        width: 250px;
        transition: right 0.25s ease-out;
        transition-delay: 0.12s;
        z-index: 1000;
    }

    .previewmode-wrapper.open {
        right: 0;
    }

    #previewmode {
        position: relative;
        z-index: 100;
        background: var(--gray-800);
        opacity: 0;
        transition: opacity 0.25s ease-out;
        transition-delay: 0.12s;
    }

    .open #previewmode {
        opacity: 1;
    }

    .previewmode-switcher {
        position: absolute;
        left: -40px;
        z-index: 101;
        top: 0;
        box-sizing: border-box;
        line-height: 38px;
        vertical-align: middle;
        text-align: center;
        width: 40px;
        height: 40px;
        background: var(--gray-800);
        opacity: 1;
        transition: all 0.12s ease-in;
        transition-delay: 0.25s;
    }

    .open .previewmode-switcher {
        opacity: 0;
        left: 0;
        z-index: 99;
        transition-delay: 0s;
    }
</style>

<div class="previewmode-wrapper" attr-class='(toolOpen, "open")'>
    <div id="previewmode" class="rounded-start rounded-end-0 rounded-3 shadow-lg shadow-dark text-white">
        <form asp-controller="Theme" asp-action="PreviewTool" asp-area="Admin" method="post" class="m-0">
            <input type="hidden" name="returnUrl" value="@Context.Request.RawUrl()" />
            <div class="p-2">
                <div class="hstack justify-content-between border-bottom border-white border-opacity-25 pb-2 mb-2">
                    <h4 class="previewmode-title m-0">@T("Admin.Configuration.Themes.PreviewMode")</h4>
                    <button type="button" class="btn-close btn-close-white toggle-preview"></button>
                </div>

                <label class="previewmode-label">@T("Admin.Configuration.Themes.Theme"):</label>
                <select name="theme" id="select-theme" asp-items="themes" class="form-control form-control-sm bg-light noskin"></select>

                <label class="previewmode-label mt-2">@T("Admin.Common.Store"):</label>
                <select name="storeId" id="select-store" asp-items="stores" class="form-control form-control-sm bg-light noskin"></select>

                <div class="row xs-gutters mt-3">
                    <div class="col-6">
                        <button type="submit" name="PreviewMode.Apply" value="@T("Common.Apply")" class="btn btn-sm btn-block btn-applytheme @(disableApply ? "btn-clear" : "btn-warning")" attr-disabled='(disableApply, "disabled")'>
                            <span>@T("Common.Apply")</span>
                        </button>
                    </div>
                    <div class="col-6">
                        <button type="submit" name="PreviewMode.Exit" title="@T("Admin.Configuration.Themes.ExitPreviewMode")" value="@T("Admin.Configuration.Themes.ExitPreviewMode")" class="btn btn-danger btn-sm btn-block btn-exitpreview">
                            <i class="far fa-fw fa-eye-slash"></i>
                            <span>@T("Common.Exit")</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <a class="previewmode-switcher toggle-preview rounded-left shadow-lg text-white" href="#" title="@T("Admin.Configuration.Themes.PreviewMode")">
        <i class="far fa-eye fa-fw x-fa-lg"></i>
    </a>
</div>

<script>
    $(function () {
        $('.toggle-preview').on('click', function (e) {
            e.preventDefault();
            var wrapper = $('.previewmode-wrapper').toggleClass("open");
            _.setCookie(".Smart.PreviewToolOpen", wrapper.hasClass("open") ? "True" : "False");
            return false;
        });

        $('#select-theme, #select-store').on('change', function () { this.form.submit(); });
    });
</script>